<template>
  <div class="app-container">
    <el-card>

      <el-form :inline="true" :model="listQuery">
        <el-form-item label="社团名">
          <el-input v-model="listQuery.name" size="small" />
        </el-form-item>
        <el-form-item label="社团分类">
          <el-select v-model="listQuery.type" size="small" clearable filterable placeholder="">
            <el-option
              v-for="item in clubTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业务单位">
          <el-select v-model="listQuery.business_unit_id" size="small" clearable filterable placeholder="">
            <el-option
              v-for="item in facultyList"
              :key="item.id"
              :label="item.faculty_title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="会长">
          <el-input v-model="listQuery.president" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            icon="el-icon-search"
            @click.native="handleFilter"
          >搜索</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click.native="resetFilter"
          >重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="dataList"
        style="width: 100%;margin-top:10px;"
        max-height="600px"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" label="社团logo" width="180">
          <template slot-scope="{row}">
            <img :src="row.photo[0].url" style="height: 100px; width: 100px">
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="社团名称" />
        <el-table-column align="center" prop="type" label="社团分类" />
        <el-table-column align="center" prop="member_count" label="社团人数" />
        <el-table-column align="center" prop="business_unit" label="业务单位" />
        <el-table-column align="center" prop="account" label="会长" />
        <!-- <el-table-column align="center" prop="established_time" label="成立时间" /> -->
        <el-table-column align="center" prop="apply_start_time" label="报名开始时间" />
        <el-table-column align="center" prop="apply_end_time" label="报名结束时间" />
        <el-table-column label="操作" min-width="180px" align="center">
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              plain
              icon="el-icon-search"
              @click="showViewDialog(row)"
            > 查看详情 </el-button>
            <el-button
              v-if="row.show_join"
              type="success"
              size="mini"
              plain
              icon="el-icon-plus"
              @click="showClubApplyDialog(row)"
            > 申请加入 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      :title="dialogText"
      :visible.sync="dialogViewFormVisible"
      width="60%"
    >
      <el-descriptions
        title="社团基本信息"
        direction="vertical"
        :column="2"
        border
      >
        <el-descriptions-item label="社团名字">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="社团分类">{{ form.type }}</el-descriptions-item>
        <el-descriptions-item label="业务单位">{{ form.business_unit }}</el-descriptions-item>
        <el-descriptions-item label="成立时间">{{ form.established_time }}</el-descriptions-item>
        <el-descriptions-item label="会长">{{ form.account }}</el-descriptions-item>
        <el-descriptions-item label="指导老师">{{ form.teacher_realname }}</el-descriptions-item>
        <el-descriptions-item label="报名开始时间">{{ form.apply_start_time }}</el-descriptions-item>
        <el-descriptions-item label="报名结束时间">{{ form.apply_end_time }}</el-descriptions-item>
      </el-descriptions>

      <el-form ref="form" :model="form" status-icon label-position="top">
        <el-form-item label="社团logo">
          <el-upload
            action="#"
            disabled
            :file-list="form.photo"
            class="hideImageUpload"
            list-type="picture-card"
          >
            <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
              <viewer ref="viewer" style="width:100%;height:100%">
                <img
                  style="width:100%;height:100%"
                  :src="file.url"
                  alt=""
                >
              </viewer>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="previewImage(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="社团介绍" style="margin-top:10px;">
          <div class="rich" v-html="form.introduction" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogViewFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="申请加入社团"
      :visible.sync="clubApplyDialog"
      width="50%"
    >
      <el-form
        ref="clubApplyForm"
        v-loading.fullscreen.lock="loading"
        :model="clubApplyForm"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :rules="clubApplyRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="申请理由" prop="reason">
          <el-input
            v-model="clubApplyForm.reason"
            autocomplete="off"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="个人介绍" prop="file">
          <el-upload
            ref="uploadFile"
            :headers="headers"
            :data="{ dir_name: 'club_cancel' }"
            :limit="fileLimitCnt"
            :multiple="false"
            accept=".xlsx,.xls,.pdf,.ppt,.doc,.docx,.pptx"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'club_apply_file', fileLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, fileLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="clubCancelFormFileList"
            :on-success="(res) => { return handleSuccess(res, 'club_apply_file') }"
            :on-remove="(res) => { return handleRemove(res, 'club_apply_file') }"
          >
            <el-button plain size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传{{ fileLimitCnt }}份文件，格式为：word文档，excel, pdf和ppt，且单个文件不超过{{ fileLimitSize }}m</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="createClubApply">
          确定
        </el-button>
        <el-button @click.native="clubApplyDialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-image-viewer
      v-if="previewImg"
      :on-close="closePreviewImage"
      :url-list="[imgUrl]"
      :z-index="9999"
    />

  </div>
</template>

<script src="./index.js"></script>

<style lang="scss">
.el-dialog__body .action {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
}
.hideImageUpload .el-upload--picture-card {
  display: none;
}
.hideImageUpload .el-upload--text {
  display: none;
}
.rich img {
  width: 100%;
}
</style>
